<template>
    <div class="fenbao-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk"
            :dialog-style="{ top: '20px' }" @cancel="modalOption.onCancel" :okText="modalOption.okText"
            :cancelText="modalOption.cancelText" class="yuan-modal fenbao-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel" v-if="!isAudit&&!isPreview">
                        <div class="form-panel-box status-panel">
                            <template v-if="detailData.subpackageState===0">
                                <i class="iconfont" >&#xe612;</i>
                                <div>
                                    <div class="status-title">待分包</div>
                                </div>
                            </template>
                            <template v-else-if="detailData.subpackageState===1">
                                <i class="iconfont c-warning" >&#xe611;;</i>
                                <div>
                                    <div class="status-title">待审核</div>
                                </div>
                            </template>
                            <template v-else-if="detailData.subpackageState===2">
                                <i class="iconfont c-success" >&#xe63b;</i>
                                <div>
                                    <div class="status-title">审核通过</div>
                                </div>
                            </template>
                            <template v-else-if="detailData.subpackageState===3">
                                <i class="iconfont c-danger" >&#xec72;</i>
                                <div>
                                    <div class="status-title">审核拒绝</div>
                                    <div>拒绝原因：{{detailData.refuseReason}}</div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="form-panel">
                        <div class="form-panel-title">{{detailData.varietyName}}</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="品名">
                                <span class="yuan-form-show">{{ detailData.varietyName }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产批号">
                                <span class="yuan-form-show">{{ detailData.productionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产品大类">
                                <span class="yuan-form-show">{{ detailData.productBigKind}}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="存货代码">-->
<!--                                <span class="yuan-form-show">{{ detailData.inventoryCode }}</span>-->
<!--                            </a-form-model-item>-->
<!--                            <a-form-model-item class="yuan-form-item" label="发药机编码">-->
<!--                                <span class="yuan-form-show">{{detailData.dispensingMachineCoder}}</span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="装量">
                                <span class="yuan-form-show">{{ detailData.discretion }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产日期">
                                <span class="yuan-form-show">{{ detailData.productionTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="保质期">
                                <span class="yuan-form-show">{{ detailData.expirationDate }}月</span>
                            </a-form-model-item>
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title">分包</div>
                        <div class="form-panel-box">
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="投料量" prop="putIntoNum">
                                <span class="yuan-form-show">{{ detailData.putIntoNum }}{{detailData.unit}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="每包装量" prop="discretion">
                                <span class="yuan-form-show">{{ detailData.discretion }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="分包数量" prop="subpackageNum"
                                v-if="isPreview">
                                <span class="yuan-form-show">{{ infoDetail.subpackageNum }}包</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="分包数量" prop="subpackageNum" v-else>
                                <span class="yuan-form-show">{{ detailData.subpackageNum }}包</span>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="isPreview">
                    <a-button @click="modalOption.onCancel">
                        返回修改
                    </a-button>
                    <a-button @click="submit" type="primary">
                        确认无误
                    </a-button>
                </template>
                <template v-else-if="isAudit">
                    <a-button @click="modalOption.onCancel">
                        关闭
                    </a-button>
                    <a-button @click="refuse" type="danger">
                        拒绝
                    </a-button>
                    <a-button @click="pass" type="primary">
                        通过
                    </a-button>
                </template>
                <template v-else>
                    <a-button @click="modalOption.onCancel">
                        关闭
                    </a-button>
                </template>
            </template>
        </a-modal>
        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="refuseCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="refuseLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因" prop="number">
                            <a-input type="textarea" style="width: 500px;" :rows="5" v-model="refuseInfo" placeholder="请输入拒绝原因"
                                :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isPreview!: boolean;
    @Prop({ default: false }) isAudit!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Prop({ default: "" }) infoDetail!: any;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    pageReady = false;
    refuseLoading = false;
    formLoading = false;
    modalOption = {
        title: "分包",
        okText: "提交",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        discretion: [{ required: true, message: "", trigger: "blur" }],
        subpackageNum: [{ required: true, message: "请输入分包数量", trigger: "blur" }],
    };
    formData: any = {};
    detailData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
    }
    closeModal() {
        this.resetForm();
        this.pageReady = false;
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                this.formLoading = true;
                try {
                    const res = await nextApi.setAuditDetail(this.formData);
                    this.$message.success(res.msg);
                    this.closeModal();
                    this.$emit("resetList");
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    async getDetail() {
        this.formLoading = true;
        this.refuseInfo = "";
        try {
            if (this.infoId) {
                const res = await nextApi.getAuditSubDetail({ id: this.infoId });
                this.detailData = { ...res.data };
            } else {
                this.detailData = {};
            }
            let num = (this.detailData.putIntoNum * 1000) / this.detailData.discretion;
            num = Math.floor(num);
            this.formData = { subpackageNum: num, id: this.infoId, subpackageState: 1 };
            this.pageReady = true;
        } finally {
            this.formLoading = false;
        }
    }
    submit() {
        this.$emit("submit");
    }
    refuseVisible = false;
    refuseInfo = "";
    refuse() {
        this.refuseVisible = true;
    }
    refuseCancel() {
        this.refuseVisible = false;
    }
    async refuseOk() {
        if (this.refuseInfo === "") {
            this.$message.error("请输入拒绝原因");
            return;
        }
        this.refuseLoading = true;
        try {
            const res = await nextApi.setAuditDetail({
                id: this.infoId,
                subpackageState: 3,
                refuseReason: this.refuseInfo,
            });
            this.$message.success(res.msg);
            this.refuseVisible = false;
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.refuseLoading = false;
        }
    }
    pass() {
        this.$confirm({
            title: "确定要通过吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const res = await nextApi.setAuditDetail({
                    id: this.infoId,
                    subpackageState: 2,
                });
                this.$message.success(res.msg);
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
}
</script>
<style lang="scss">
.fenbao-detail-modal{
    .status-panel{
        display: flex;
        align-items: center;
        .iconfont{
            font-size: 35px;
            margin-right: 10px;
        }
    }
    .status-title{
        font-size: 16px;
        font-weight: bold;
    }
}
</style>
